<template>
  <div class="dashboard-container">
    <div class="welcome-message">
      <p class="greeting-text">你好，{{ name }}！</p>
      <p class="greeting-text">工号：{{ userSn }}！</p>
      <div class="cta-btn">
        <!-- <button @click="onStart" class="start-btn">请开始上传工资明细吧</button> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name', 'userSn']) // 从 Vuex 获取用户的名字
  },
  methods: {
    onStart() {
      // 这里可以添加导航到其他页面的逻辑
      console.log("开始使用按钮被点击！");
    }
  }
}
</script>

<style lang="scss" scoped>
/* 重置默认的外边距和内边距 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 90%; /* 设置全局的高度为 100% */
  overflow: hidden; /* 防止页面出现滚动条 */
}

.dashboard-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 92vh; /* 确保容器至少占满整个视口 */
  background: radial-gradient(circle, rgba(25, 50, 100, 0.8), rgba(10, 20, 40, 0.9)); /* 圆形渐变与背景图 */
  background-size: cover;
  color: #fff;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  text-align: center;
  height: 92vh; /* 设置容器的高度为视口高度，避免滚动 */
}

.welcome-message {
  max-width: 700px;
  width: 90%; /* 限制宽度百分比，确保响应式设计 */
  padding: 50px;
  background: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* 深度阴影 */
  backdrop-filter: blur(10px); /* 背景模糊效果 */
}

h1 {
  font-size: 50px;
  font-weight: 700;
  color: #FFB400; /* 金色标题 */
  margin-bottom: 20px;
  animation: fadeInUp 1.2s ease-out; /* 从下往上淡入动画 */
}

.greeting-text {
  font-size: 40px;
  font-weight: 600;
  margin: 20px 0;
  color: #FF6347; /* 渐变色标题 */
  background: linear-gradient(45deg, #FF6347, #FFB400);
  -webkit-background-clip: text; /* 文字背景渐变 */
  background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 5px rgba(255, 99, 71, 0.5); /* 文字阴影 */
  animation: greetingTextAnim 2s ease-out 1; /* 弹跳动画 */
}

.intro-text {
  font-size: 20px;
  margin-top: 10px;
  color: #E0E0E0; /* 淡灰色文字 */
  line-height: 1.6;
  animation: fadeInUp 1.8s ease-out;
}

.cta-btn {
  margin-top: 30px;
}

.start-btn {
  padding: 15px 30px;
  font-size: 18px;
  background: linear-gradient(135deg, #FF6347, #FFB400); /* 渐变色按钮 */
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 15px rgba(255, 99, 71, 0.4); /* 按钮阴影 */
}

.start-btn:hover {
  transform: translateY(-4px); /* 鼠标悬停时按钮上升 */
  box-shadow: 0 10px 20px rgba(255, 99, 71, 0.6); /* 按钮阴影增大 */
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes greetingTextAnim {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  50% {
    transform: translateY(-10px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
